<template>
    <div 
    class="
    relative flex flex-col justify-center items-center h-40 bg-gray-100">
        <div 
        class="
        absolute flex flex-row -top-2 w-full h-4
        justify-between items-center gap-2">
            <div class="relative h-0.5 w-full bg-gray-400 rounded-2xl"></div>
                <div class="flex font-thin w-max text-gray-600">
                    <p class="w-max">我仍然稚嫩，期待与您的技术交流</p>
                </div>
            <div class="relative h-0.5 w-full bg-gray-400 rounded-2xl"></div>
        </div> 
        <div 
        class="flex flex-row bg-white w-36/40 lg:w-22/40 h-12 lg:h-16 mt-1 lg:mt-2 px-12 lg:px-22 rounded-3xl
        border-4 border-gray-300
        justify-between items-center">
            <!-- GitHub -->
            <div class="flex relative rounded-full w-6 h-6 lg:w-10 lg:h-10">
                <a href="https://github.com/KIPPUDESU" target="_blank">
                    <svg 
                    aria-hidden="true"
                    viewBox="0 0 24 24" 
                    version="1.1" 
                    data-view-component="true"
                    class="absolute top-0 left-0 w-6 lg:w-10 ">
                        <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path>
                    </svg>
                </a>
            </div>
            <!-- 推特 -->
            <div class="flex relative rounded-full w-6 h-6 lg:w-10 lg:h-10">
                <a href="https://x.com/aKIPPUz" target="_blank">
                    <svg 
                    viewBox="0 0 24 24" 
                    aria-hidden="true"
                    class="absolute top-0 left-0 w-6 lg:w-10 ">
                        <g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g>
                    </svg>
                </a>
            </div>
            <!-- Telegram -->
            <div class="flex relative rounded-full w-6 h-6 lg:w-10 lg:h-10">
                <a href="https://t.me/aKIPPUDESUz" target="_blank">
                    <svg
                    viewBox="0 0 24 24"
                    fill="none" 
                    xmlns="http://www.w3.org/2000/svg"
                    class="absolute top-1 -left-1 w-6 lg:w-10 ">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M1.64325 8.19454C8.08437 5.52165 12.3723 3.74557 14.5255 2.88392C20.6538 0.439622 21.942 0.0175849 22.7701 0C22.9542 0 23.359 0.03517 23.6351 0.246188C23.8559 0.422037 23.9111 0.650641 23.9479 0.826489C23.9848 1.00234 24.0216 1.37162 23.9848 1.65298C23.6535 4.9941 22.218 13.1007 21.4819 16.8287C21.1691 18.4113 20.5618 18.9389 19.9729 18.9916C18.6846 19.0972 17.7093 18.1827 16.4762 17.409C14.5255 16.1957 13.4397 15.4395 11.5442 14.2437C9.3542 12.8721 10.7712 12.116 12.0227 10.885C12.3539 10.5685 18.0037 5.64474 18.1141 5.20512C18.1325 5.15236 18.1325 4.94134 18.0037 4.83584C17.8749 4.73033 17.6909 4.7655 17.5436 4.80067C17.3412 4.83584 14.2495 6.80534 8.2316 10.6916C7.34825 11.2719 6.55691 11.5533 5.83918 11.5357C5.04784 11.5181 3.53878 11.1136 2.39778 10.7619C1.01754 10.3399 -0.0866539 10.1113 0.00536217 9.37273C0.0605718 8.98586 0.612668 8.599 1.64325 8.19454Z" fill="black"/>
                    </svg>
                </a>
            </div>
            <!-- Discord -->
            <div class="flex relative bg-black/0 rounded-4xl w-6 h-6 lg:w-10 lg:h-10">
                <a href="https://discord.gg/F22fCZtr" target="_blank1">
                    <svg 
                    viewBox="0 0 24 24"
                    fill="none" 
                    xmlns="http://www.w3.org/2000/svg"
                    class="absolute top-0 left-0 w-6 lg:w-10 ">
                        <path d="M15.744 15.1222C14.6107 15.048 13.7197 14.1105 13.7197 12.9645C13.7197 12.9262 13.7205 12.888 13.7227 12.8497V12.855C13.7205 12.819 13.719 12.777 13.719 12.7342C13.719 11.5905 14.6115 10.656 15.738 10.5877H15.744C16.8757 10.6492 17.7697 11.5815 17.7697 12.723C17.7697 12.7695 17.7682 12.8152 17.7652 12.861V12.855C17.7675 12.8925 17.769 12.9367 17.769 12.981C17.769 14.1232 16.8757 15.057 15.7492 15.1215H15.7432L15.744 15.1222ZM8.26947 15.1222C7.13622 15.048 6.24522 14.1105 6.24522 12.9645C6.24522 12.9262 6.24597 12.888 6.24822 12.8497V12.855C6.24597 12.819 6.24447 12.777 6.24447 12.7342C6.24447 11.5905 7.13697 10.656 8.26347 10.5877H8.26947C9.40122 10.6492 10.2952 11.5815 10.2952 12.723C10.2952 12.7695 10.2937 12.8152 10.2907 12.861V12.855C10.293 12.891 10.2945 12.933 10.2945 12.9757C10.2945 14.1195 9.40197 15.054 8.27547 15.1222H8.26947ZM19.7947 4.84874C18.4725 4.22474 16.9365 3.73124 15.3285 3.44549L15.2167 3.42899C15.213 3.42824 15.2085 3.42749 15.204 3.42749C15.1777 3.42749 15.1552 3.44174 15.1432 3.46274C14.9677 3.77099 14.7772 4.15574 14.6055 4.55024L14.5732 4.63349C13.8007 4.50974 12.9097 4.43924 12.0022 4.43924C11.0947 4.43924 10.2037 4.50974 9.33447 4.64549L9.43122 4.63274C9.22872 4.16024 9.03522 3.77624 8.82147 3.40424L8.85222 3.46199C8.83947 3.44024 8.81622 3.42674 8.78997 3.42674C8.78622 3.42674 8.78172 3.42674 8.77797 3.42749C7.05822 3.72974 5.52222 4.22249 4.08672 4.89524L4.19997 4.84724C4.18722 4.85249 4.17672 4.86149 4.16997 4.87274C2.02947 7.90349 0.748474 11.6745 0.748474 15.7447C0.748474 16.425 0.784474 17.0962 0.854224 17.7577L0.847474 17.6752C0.849724 17.697 0.860974 17.715 0.876724 17.7277C2.48172 18.9285 4.34772 19.896 6.36147 20.5312L6.49347 20.5672C6.49947 20.5695 6.50697 20.5702 6.51447 20.5702C6.53847 20.5702 6.55947 20.559 6.57222 20.5417C6.97347 20.0017 7.35522 19.3897 7.68597 18.7477L7.72122 18.6727C7.72572 18.6637 7.72872 18.6525 7.72872 18.6405C7.72872 18.6097 7.70922 18.5842 7.68222 18.5737H7.68147C6.99747 18.3097 6.41922 18.0285 5.86872 17.706L5.92647 17.7375C5.90472 17.7247 5.89047 17.7015 5.89047 17.6752C5.89047 17.652 5.90172 17.631 5.91897 17.6182C6.03672 17.5297 6.15522 17.4382 6.26772 17.3452C6.27972 17.3355 6.29547 17.3295 6.31197 17.3295C6.32247 17.3295 6.33222 17.3317 6.34047 17.3355H6.33972C7.99572 18.1312 9.93972 18.5962 11.9917 18.5962C14.0437 18.5962 15.9885 18.1312 17.724 17.301L17.6437 17.3355C17.6527 17.331 17.6625 17.3287 17.6737 17.3287C17.6902 17.3287 17.706 17.3347 17.718 17.3445C17.8305 17.4375 17.9482 17.5305 18.0675 17.6182C18.0847 17.6317 18.096 17.6527 18.096 17.676C18.096 17.7022 18.0817 17.7247 18.0615 17.7375C17.5657 18.0337 16.9875 18.3142 16.3852 18.546L16.3065 18.573C16.2795 18.5835 16.26 18.6097 16.26 18.6397C16.26 18.6517 16.263 18.663 16.2682 18.6727C16.644 19.3927 17.025 20.0032 17.4465 20.583L17.4165 20.5402C17.4292 20.5582 17.451 20.5702 17.4742 20.5702C17.4817 20.5702 17.4892 20.5687 17.496 20.5672C19.6447 19.8982 21.5137 18.9307 23.1697 17.6932L23.121 17.7285C23.1375 17.7165 23.148 17.6977 23.1502 17.6767C23.2155 17.0887 23.2522 16.4062 23.2522 15.7155C23.2522 11.6542 21.9682 7.89299 19.785 4.81499L19.824 4.87349C19.818 4.86149 19.8075 4.85174 19.7955 4.84649L19.7947 4.84874Z" fill="black"/>
                    </svg>
                </a>
            </div>
        </div>
        <div class="relative mt-2 flex flex-col justify-center items-center text-[8px] lg:text-[16px]">
            <p class="text-gray-500">Copyright © 2025-Present KIPPU | Powered by
            <a class="text-blue-400" href="https://nuxt.com/" target="_blank" rel="noopener noreferrer">Nuxt.js</a> & 
            <a class="text-blue-400" href="https://tailwindcss.nuxtjs.org/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>
            </p>  
            <p class="text-gray-600">Layout is released for free use. All other content is © KIPPU—do not copy or claim as your own.</p>
        </div>
    </div>
</template>